import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import './shop.less'
import { reqcartlist, reqcartupdate ,reqcartdel} from '../../request/api'
import { imgPre } from '../../request/http'
import { filterPrice } from '../../filters/index'
import { Toast } from 'antd-mobile'
export default class Shop extends Component {
  constructor() {
    super()
    this.state = {
      cartlist: [],//购物车列表
      // num:1,//商品数量
      issub: true,
      
      all: false
    }
  }
  componentDidMount() {
    this.init()
  }
  init = () => {

    reqcartlist({
      uid: JSON.parse(localStorage.getItem('isLogin')).uid
    }).then(d => {
      if (d.data.code == 200) {
         let newArr=d.data.list[1].content?d.data.list[1].content:[]
        this.setState({
          cartlist:newArr ,
          issub: true
        })
      }
    })
  }
  //减少
  changesub(id, index) {
    if (this.state.issub) {
      let num = this.state.cartlist[index].num
      if (num <= 1) {
        Toast.show({
          content: '宝贝不能再少啦'
        })
        return
      }
      this.setState({
        issub: false
      })
      reqcartupdate({
        id,
        type: 1
      }).then(d => {
        if (d.data.code == 200) {
          this.init()
        }
      })
    }
  }

  changeadd(id, index) {
    reqcartupdate({
      id,
      type: 2
    }).then(d => {
      if (d.data.code == 200) {
        this.init()
      }
    })
  }

  //删除
  del(id){
    reqcartdel({id}).then(d=>{
       if(d.data.code==200){
         Toast.show({
           content:'删除成功'
         })
         this.init()
       }
    })
  }

   
  all(e) {
    this.setState({
      all: e.target.checked  //将e.target.checked赋值给all
    })
    let obj = this.state.cartlist;  //取
    obj.map((item) => item.checked = e.target.checked) //给obj每一项添加checked 并且让checked的只为点前的e.target.checked
    this.setState({
      cartlist: obj  //放
    })
    // console.log(e);
  }
  //单选
  one(e, index) {
    // console.log(e,index);
    let arr = this.state.cartlist;//取
    // console.log(arr);
    arr[index].checked = e.target.checked //点击单选checked赋值
      this.setState({
        cartlist: arr //放
      })

      //判断item 的每一项的checked的值等不等于true 只要有一项不等于就返回false 再去改变all
    if (arr.every((item) => item.checked == true)) {
      this.setState({
        all: true
      })
    } else {
      this.setState({
        all: false
      })
    }
  }
  render() {
   
    let { cartlist, all } = this.state
    let sum =cartlist.reduce((val,item)=>(item.checked?val+(item.price*item.num):val),0);
    return (
      <div>
        <Header title={'购物车'} back></Header>
        <div className="shoplist">
          {/* <div>{JSON.stringify(cartlist)}</div> */}
          {
            cartlist.map((item, index) => {
              return (
                <div className="shopone" key={item.id}>
                  <div className='shop-img'>
                    <input type="checkbox" checked={item.checked} onChange={(e) => this.one(e, index)} name="" id="" />
                    <img src={imgPre + item.img} alt="" />
                  </div>
                  <div className="info">
                    <h3>{item.goodsname}</h3>
                    <p>￥{filterPrice(item.price)} </p>
                    <button onClick={() => this.changesub(item.id, index)} >-</button><b> {item.num} </b><button onClick={() => { this.changeadd(item.id, index) }}>+</button>

                  </div>
                  <span className='del' onClick={()=>{this.del(item.id)}}>删除</span>
                </div>
                
              )
            })
          }

          <div className='totals'>
            全选 <input type="checkbox" name='' checked={all} onChange={(e) => this.all(e)} />
            <span>合计:{filterPrice(sum)}</span>

          </div>
        </div>
      </div>
    )
  }
}
